<template>
  <div>
    <div class="w-[1680px] h-40 mx-auto mt-4 px-72 flex sticky top-0 bg-white">
      <div class="w-80">
        <img class="w-72" src="../../../assets/img/logo.png">
      </div>
      <div class="text-xl w-[720px] h-36 leading-[144px] ml-8 flex relative">
        <div>
          <input class="bg-white w-[655px] h-14 border-2 border-solid border-rose-500 ml-12 p-5 rounded-[30px]"
            type="text" v-model="cateContent">
          <button class="bg-rose-500 w-28 h-14 leading-[56px] rounded-[32px] text-white absolute top-[44px] left-[590px] "
            @click="getData">搜索</button>
        </div>
      </div>
    </div>
  </div>
  <div class="clearfix w-[1500px] bg-zinc-100 mx-auto py-4 my-4">
    <div
      class="w-[23%] h-[480px] float-left mt-2.5 mx-3.5 px-3 py-2.5 border-2 border-solid border-zinc-300 hover:border-rose-500"
      v-for="item in productInfoData" :key="item" @click="commodityDetail(item.productId)">
      <img class="w-full h-2/3" :src="`http://127.0.0.1:8081${item.productImage}`" alt="">
      <span
        class="title inline-block text-xl font-bold mt-2 text-ellipsis overflow-hidden">{{ item.productProfile }}</span>
      <span class="text-red text-2xl font-bold">￥{{ item.sellPrice }}</span>
      <div class="mt-2">
        <span class="float-left">{{ item.businessName }}</span>
        <span class="float-right">{{ item.businessAddress }}</span>
      </div>
    </div>
    <el-backtop class="bg-yellow w-24 h-24" :right="0">
      <div class="w-24 text-center p-1 text-sm bg-rose-400 text-white hover:bg-rose-500">回到顶部</div>
    </el-backtop>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      cateContent: window.localStorage.getItem( "cateContent" ),
      productInfoData: [],
    }
  },
  mounted() {   // 钩子函数
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectProductByCateName',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          cateName: this.cateContent,
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.productInfoData = res.data.data.productInfoList
          window.localStorage.removeItem( "searchContent" )
        }
      } )
    },
    // 页面跳转
    commodityDetail( productId ) {
      window.localStorage.setItem( "productId", productId );
      this.$router.push( '/commodityDetail' )
    }
  }
}
</script>

<style scoped >
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>